<template>
  <div>
    <header>
      <div class="title">
        <p>
          <icon type="search" size="20" />
          <input placeholder="请输入需要查询的经纪人" v-model="val" />
        </p>
      </div>
      <div class="agent">
        <dl
          v-for="(item, index) in topList"
          :key="index "
          @click="toDetail(item.brokerid)"
        >
          <p><i class="iconfont icon-paihangbang"></i></p>
          <dt><img :src="item.brokerimg" /></dt>
          <dd>{{ item.bname }}</dd>
        </dl>
      </div>
    </header>
    <section>
      <div>
        <dl
          v-for="(item, index) in bottomList"
          :key="index"
          @click="toDetail(item.brokerid)"
        >
          <dt>{{ index + 4 }}<img :src="item.brokerimg" /></dt>
          <dd>
            <p>
              <span>{{ item.bname }}</span
              ><span>{{ item.sqname }}</span>
            </p>
            <p>
              <i class="iconfont icon-xinxi"></i>
              <i class="iconfont icon-dianhua"></i>
            </p>
          </dd>
        </dl>
      </div>
    </section>
  </div>
</template>

<script>
import "../../static/agent/iconfont.css";
import { getAgentlist } from "../../services/index";
export default {
  data() {
    return {
      topList: [],
      bottomList: [],
      val: "",
      list: [],
    };
  },
  //模糊搜索
  computed: {
    search() {
      if (this.val) {
        this.bottomList = this.list.filter((item) => {
          return item.bname.includes(this.val);
        });
      } else {
        this.bottomList = this.list.slice(3);
      }
    },
  },
  methods: {
    //跳转详情
    toDetail(id) {
      uni.navigateTo({
        url: "../agentdetails/agentdetails?id=" + id,
      });
    },
  },
  //获取经纪人数据
  async onShow() {
    let res = await getAgentlist();
    this.list = res.data.list;
    this.topList = this.list.slice(0, 3);
    this.bottomList = this.list.slice(3);
  },
};
</script>

<style lang='scss' scoped >
header {
  width: 100%;
  height: 500rpx;
  background: #ff656d;
  display: flex;
  flex-direction: column;
  .agent {
    width: 100%;
    height: 400rpx;
    margin-top: 20rpx;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 10rpx;
    dl:nth-child(1),
    dl:nth-child(3) {
      width: 25%;
      height: 300rpx;
      background: white;
      border-radius: 10rpx;
      > p {
        i {
          color: chocolate;
          font-size: 50rpx;
        }
      }
    }
    dl:nth-child(2) {
      width: 30%;
      height: 350rpx;
      background: white;
      border-radius: 10rpx;
      > p {
        i {
          color: yellow;
          font-size: 50rpx;
        }
      }
    }
    dl {
      margin-left: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      dt {
        width: 300rpx;
        height: 200rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 150rpx;
          height: 150rpx;
          border-radius: 50%;
        }
      }
      dd {
        width: 300rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .title {
    width: 100%;
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    p {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 90%;
      height: 90%;
      margin-top: 20rpx;
      background: #f5f5f5;
      input {
        width: 400rpx;
        height: 60rpx;
      }
    }
  }
}
section {
  width: 100%;
  display: flex;
  flex-direction: column;
  dl {
    width: 100%;
    height: 150rpx;
    display: flex;
    border: 1px solid #ccc;
    align-items: center;
    dt {
      width: 200rpx;
      height: 100rpx;
      display: flex;
      justify-content: space-around;
      align-items: center;
      img {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
      }
    }
    dd {
      height: 100rpx;
      width: 500rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      p:nth-child(1) {
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        span:nth-child(1) {
          font-weight: 600;
        }
        span:nth-child(2) {
          margin-top: 10rpx;
          font-size: 26rpx;
          color: #ccc;
        }
      }
      p:nth-child(2) {
        width: 200rpx;
        height: 100rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;
        i {
          display: inline-block;
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          font-size: 40rpx;
          background: pink;
          color: coral;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}
</style>